<template>
	<section class="vbox">
		<section class="scrollable wrapper-lg">
			<div class="row">
				<div class="col-sm-9">
					<div class="row row-sm">
						<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2" v-for="item in books">
							<div class="item">
								<div class="pos-rlt">
									<div class="top padder">
										<a href="#" class="pull-right active" data-toggle="class">
											<i class="fa fa-bookmark-o text-active text-primary"></i>
											<i class="fa fa-bookmark text text-info"></i>
										</a>
									</div>
									<!-- <div class="bottom">
										<span class="badge bg-info m-l-sm m-b-sm">300 字</span>
									</div> -->

									<div class="bottom padder m-b-sm">
										<a href="#" class="pull-right active" data-toggle="class">
											<i class="fa fa-heart-o text-danger text-active"></i>
											<i class="fa fa-heart text-danger text"></i>
										</a>
										<a href="#" data-toggle="class">
											<i class="fa fa-plus-circle text"></i>
											<i class="fa fa-check-circle text-active text-info"></i>
										</a>
									</div><!-- style="width: 100px; height: 150px;" -->
									<router-link :to="'/book/'+ item.id"><img :src="$api.file.url.view + item.poster" style="height: 200px;" alt="" class="img-responsive"></a></router-link>
								</div>
								<div class="padder-v">
									<router-link :to="'/book/'+ item.id" class="text-ellipsis">{{ item.title }}</router-link>
									<router-link :to="'/book/'+ item.id" class="text-ellipsis text-xs text-muted">{{ item.author }}</router-link>
								</div>
							</div>
						</div>
						<div class="clearfix visible-xs"></div>
					</div>
					<div class="text-center m-t-sm m-b-sm">
						<pagination :total="total" :pageNo='pageNo' :pageSize='pageSize' @onPageChange="query"></pagination>
					</div>
				</div>
				<div class="col-sm-3">
					<h5 class="font-bold">分类</h5>
					<ul class="list-group">
						<li class="list-group-item" v-for="item in categories">
							<a href="#">
								<span class="badge pull-right">{{ item.count }}</span>
								{{ item.name }}
							</a>
						</li>
					</ul>
					<div class="tags m-b-lg l-h-2x">
						<a href="#" class="label bg-primary">生活</a> <a href="#" class="label bg-primary">放生</a> <a href="#" class="label bg-primary">感悟</a>
						<a href="#" class="label bg-primary">经验</a> <a href="#" class="label bg-primary">实录</a>
						<a href="#" class="label bg-primary">交流</a>
					</div>
					<h5 class="font-bold">Recent Posts</h5>
					<div>
						<article class="media">
							<a class="pull-left thumb thumb-wrapper m-t-xs">
								<img src="/static/images/m1.jpg">
							</a>
							<div class="media-body">
								<a href="#" class="font-semibold">Bootstrap 3: What you need to know</a>
								<div class="text-xs block m-t-xs"><a href="#">Travel</a> 2 minutes ago</div>
							</div>
						</article>
						<div class="line"></div>
						<article class="media m-t-none">
							<a class="pull-left thumb thumb-wrapper m-t-xs">
								<img src="/static/images/m2.jpg">
							</a>
							<div class="media-body">
								<a href="#" class="font-semibold">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
								<div class="text-xs block m-t-xs"><a href="#">Design</a> 2 hours ago</div>
							</div>
						</article>
						<div class="line"></div>
						<article class="media m-t-none">
							<a class="pull-left thumb thumb-wrapper m-t-xs">
								<img src="/static/images/m3.jpg">
							</a>
							<div class="media-body">
								<a href="#" class="font-semibold">Sed diam nonummy nibh euismod tincidunt ut laoreet</a>
								<div class="text-xs block m-t-xs"><a href="#">MFC</a> 1 week ago</div>
							</div>
						</article>
					</div>
				</div>
			</div>
		</section>
	</section>
</template>

<script>
	export default {
		components: {
			
		},
		data() {
			return {
				keywords: '',
				total: 0, // 记录总条数
				pageSize: 10, // 每页显示条数
				pageNo: 1, // 当前的页数
				categories: [{
					name: '佛经',
					count: 38
				}, {
					name: '儒家',
					count: 20
				}, {
					name: '道家',
					count: 15
				}, {
					name: '纪实',
					count: 340
				}],
				books: [{
					id: 1,
					title: '心经',
					author: '梵音组合',
					poster: 'https://img14.360buyimg.com/n0/jfs/t16723/155/143367527/375365/dce44c99/5a5ff589Nb147528c.jpg'
				}]
			}
		},
		mounted() {
			this.query();
		},
		methods: {
			query(pageNo) {
				this.pageNo = null == pageNo ? 1 : pageNo;
				this.$api.book.query({
					title: this.keywords,
					publish: 1,
					pageSize: this.pageSize,
					pageNo: this.pageNo
				}).then(data => {
					this.books = data.rows;
					this.pageNo = data.pageNo;
					if (1 == this.pageNo) {
						this.total = data.total;
					}
				});
			}
		}
	}
</script>

<style>
</style>
